import React, { useState } from 'react';
import './index.scss';
import useMounted from '@/hooks/useMounted';

function GoTopButton() {
  const [scrollY, setScrollY] = useState(0);

  useMounted(() => {
    const listenScroll = () => {
      setScrollY(window.scrollY);
    };

    window.addEventListener('scroll', listenScroll);

    return () => {
      window.removeEventListener('scroll', listenScroll);
    };
  });

  return (
    <div
      className={`gotop-btn ${scrollY > 100 ? '' : 'hide'}`}
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
    >
      <span className="iconfont icon-direction-up" />
    </div>
  );
}

export default GoTopButton;
